<template>
  <div class="purchase-list-layout">
    <crumbList :navList="navList"></crumbList>
    <div class="purchase-content">
      <div class="purchase-table">
        <div class="purchase-item mb0">
          <el-form ref="searchData" :model="searchData" class="clearfix">
            <el-form-item>
              <el-select v-model="searchData.factoryName" placeholder="厂商">
                <el-option :label="item.factoryName" :value="item.factoryName" v-for="(item,index) in factoryMsg"
                           :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="searchData.machineName " placeholder="产品名称">
                <el-option :label="item.productName" :value="item.productName" v-for="(item,index) in productMsg"
                           :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="!isclick">
              <el-select v-model="searchData.isChecked " placeholder="是否核实">
                <el-option label="未核实" value="0"></el-option>
                <el-option label="已核实" value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="!isclick">
              <el-input v-model="searchData.checkMan" placeholder="核实人"></el-input>
            </el-form-item>
            <el-form-item v-if="isclick">
              <el-input v-model="searchData.repairMan" placeholder="报修人"></el-input>
            </el-form-item>
            <el-form-item v-if="isclick">
              <el-select v-model="searchData.productType" placeholder="型号">
                <el-option :label="item.productType" :key="index" :value="item.productType"
                           v-for="(item,index) in productMsg"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="isclick">
              <el-input v-model="searchData.lineShort" placeholder="线路短号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="searchData.selfNumber" placeholder="自编号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="searchData.fixedNumber" placeholder="固号"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="searchData.busNum" placeholder="车牌号"></el-input>
            </el-form-item>
            <el-form-item class="itemTime" v-if="isclick">
              <el-date-picker type="daterange" placeholder="报修时间" v-model="searchData.choseTime1"></el-date-picker>
            </el-form-item>
            <el-form-item class="itemTime principalItem" v-if="!isclick">
              <el-date-picker type="daterange" placeholder="核实时间" v-model="searchData.choseTime2"></el-date-picker>
            </el-form-item>
            <div class="new-build-change fl clearfix">
              <el-form-item class="fl btnLayout clearfix">
                <el-button class="btnChange fl" :class="{'clickBag':isclick}" @click.native="chageRepaireTabel">报修
                </el-button>
                <el-button class="btnChange fl" :class="{'clickBag':!isclick}" @click.native="chageCheckTabel">核实
                </el-button>
              </el-form-item>
              <el-form-item class="itemButton">
                <el-button type="primary" @click.native="submitSearch">查询</el-button>
                <el-button type="primary" @click.native="resetItem">重置</el-button>
                <el-button type="primary" class="addItem" @click="addList">新增保修单</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="purchase-table-list">
          <el-table :data="tableData" border>
            <el-table-column :label="item.label" :key="index" :width="item.name==='orderNum'?64:''"
                             v-for="(item,index) in tableItem">
              <template scope="scope">
                <el-popover trigger="hover" placement="top">
                  <p>{{item.label}}: {{ scope.row[item.name]}}</p>
                  <div slot="reference">
                    <el-tag>{{ scope.row[item.name] }}</el-tag>
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="220">
              <template scope="scope">
                <el-button type="primary" class="accessoryBtn" @click="handleCheck(scope.$index, scope.row)">核实
                </el-button>
                <el-button type="primary" class="editBtn" @click="modification(scope.$index, scope.row)">修改</el-button>
                <el-button type="primary" class="deleteBtn" @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination layout="total, prev, pager, next, jumper"
                         @current-change="handleCurrentChange"
                         :current-page="page.pageNum"
                         :page-size="page.pageSize"
                         :total="page.total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import crumbList from '../../common/crumbList.vue'
  import getParam from '../../../utils/getParams/getParams'
  import ajax from '../../../utils/ajax/index'
  import resetDate from '../../../utils/date/resetDate'
  import { mapState } from 'vuex'

  export default {
    data () {
      return {
        navList: [
          {name: '项目详情', path: ''},
          {name: '机具维护', path: 'maintain'},
          {name: JSON.parse(sessionStorage.getItem('projectItemData')).name, path: ''}
        ],
        isclick: true,
        searchData: {
          factoryName: '',
          machineName: '',
          isChecked: '',
          checkMan: '',
          repairMan: '',
          productType: '',
          lineShort: '',
          selfNumber: '',
          fixedNumber: '',
          busNum: '',
          choseTime1: '',
          choseTime2: ''
        },
        tableData: [],
        tableItem: [],
        repaireData: [],
        repaireItem: [
          {label: '序号', name: 'orderNum'},
          {label: '厂商', name: 'factoryName'},
          {label: '产品名称', name: 'machineName'},
          {label: '型号', name: 'productType'},
          {label: '批次', name: 'batch'},
          {label: '固号', name: 'fixedNumber'},
          {label: '线路短号', name: 'lineShort'},
          {label: '车牌号', name: 'busNum'},
          {label: '自编号', name: 'selfNumber'},
          {label: '报修类型', name: 'repairType'},
          {label: '报修时间', name: 'repairTime'},
          {label: '报修人', name: 'repairMan'},
          {label: '备注', name: 'repairRemark'}
        ],
        checkData: [],
        checkItem: [
          {label: '序号', name: 'orderNum'},
          {label: '厂商', name: 'factoryName'},
          {label: '产品名称', name: 'machineName'},
          {label: '固号', name: 'fixedNumber'},
          {label: '线路短号', name: 'lineShort'},
          {label: '车牌号', name: 'busNum'},
          {label: '自编号', name: 'selfNumber'},
          {label: '是否核实', name: 'isChecked'},
          {label: '核实时间', name: 'checkTime'},
          {label: '核实人', name: 'checkMan'},
          {label: '处理方式', name: 'handleMethod'},
          {label: '处理结果', name: 'handleResult'},
          {label: '备注', name: 'checkRemark'}
        ],
        page: {
          pageNum: 1,
          pageSize: 1,
          total: 1,
          pages: 1,
          size: 1
        },
        repairePage: {},
        checkPage: {}
      }
    },
    computed: {
      ...mapState(['cityMsg', 'factoryMsg', 'productMsg'])
    },
    components: {crumbList},
    created () {
      let itemData = JSON.parse(sessionStorage.getItem('maintain'))
      if (itemData) {
        sessionStorage.removeItem('maintain')
      }
      let itemData2 = JSON.parse(sessionStorage.getItem('maintainChange'))
      if (itemData2) {
        sessionStorage.removeItem('maintainChange')
      }
      // 表单
      this.getRepaireFormMes()
      this.getCheckFormMes()
    },
    methods: {
      chageRepaireTabel () {
        this.isclick = true
        this.tableItem = this.repaireItem
        this.getRepaireFormMes()
      },
      chageCheckTabel () {
        this.isclick = false
        this.tableItem = this.checkItem
        this.getCheckFormMes()
      },
      // 获取报修表单数据
      getRepaireFormMes () {
        let url = this.api2.maintain.projectRepaireData
        let params = {
          projectCode: getParam('id')
        }
        ajax.get(url, params).then((res) => {
          if (res.msg.code === '20000') {
            let data = res.data
            this.repairePage = data.page
            for (let i = 0; i < data.list.length; i++) {
              data.list[i].edit = true
              data.list[i].orderNum = i + 1
              if (data.list[i].isChecked === 0) {
                data.list[i].isChecked = '未核实'
              } else if (data.list[i].isChecked === 1) {
                data.list[i].isChecked = '已核实'
              }
            }
            this.repaireData = data.list
            if (this.isclick) {
              this.tableData = this.repaireData
              this.tableItem = this.repaireItem
              this.page = this.repairePage
            }
          } else {
            this.$message.error(res.msg.message)
          }
        })
      },
      // 获取核实表单数据
      getCheckFormMes () {
        let url = this.api2.maintain.projectCheckData
        let params = {
          projectCode: getParam('id')
        }
        ajax.get(url, params).then((res) => {
          if (res.msg.code === '20000') {
            let data = res.data
            this.checkPage = data.page
            for (let i = 0; i < data.list.length; i++) {
              data.list[i].edit = true
              data.list[i].orderNum = i + 1
              if (data.list[i].isChecked === 0) {
                data.list[i].isChecked = '未核实'
              } else if (data.list[i].isChecked === 1) {
                data.list[i].isChecked = '已核实'
              }
            }
            this.checkData = data.list
            if (!this.isclick) {
              this.tableData = this.checkData
              this.tableItem = this.checkItem
              this.page = this.checkPage
            }
          } else {
            this.$message.error(res.msg.message)
          }
        })
      },
      submitSearch () {
        let url
        if (this.isclick) {
          url = this.api2.maintain.projectRepaireData
          this.searchData.repairTime = resetDate(this.searchData.choseTime1[0])
          this.searchData.endTime = resetDate(this.searchData.choseTime1[1])
        } else {
          url = this.api2.maintain.projectCheckData
          this.searchData.checkTime = resetDate(this.searchData.choseTime2[0])
          this.searchData.endTime = resetDate(this.searchData.choseTime2[0])
        }
        let params = this.searchData
        params.projectCode = getParam('id')
        ajax.get(url, params).then((res) => {
          if (res.msg.code === '20000') {
            let data = res.data
            for (let i = 0; i < data.list.length; i++) {
              data.list[i].edit = true
              data.list[i].orderNum = i + 1
              if (data.list[i].isChecked === 0) {
                data.list[i].isChecked = '未核实'
              } else if (data.list[i].isChecked === 1) {
                data.list[i].isChecked = '已核实'
              }
            }
            this.page = data.page
            if (this.isclick) {
              this.repaireData = data.list
              this.tableData = this.repaireData
              this.tableItem = this.repaireItem
            } else {
              this.checkData = data.list
              this.tableData = this.checkData
              this.tableItem = this.checkItem
            }
          }
        })
      },
      resetItem () {
        this.searchData = {
          factoryName: '',
          machineName: '',
          isChecked: '',
          checkMan: '',
          repairMan: '',
          productType: '',
          lineShort: '',
          selfNumber: '',
          fixedNumber: '',
          busNum: '',
          choseTime1: '',
          checkTime: ''
        }
        this.getRepaireFormMes()
        this.getCheckFormMes()
      },
      addList () {
        this.$router.push(`/newMaintain?id=` + getParam('id'))
      },
      // 核实
      handleCheck (index, row) {
        sessionStorage.setItem('maintain', JSON.stringify(row))
        this.$router.push(`/newMaintain?id=` + getParam('id'))
      },
      // 修改
      modification (index, row) {
        sessionStorage.setItem('maintainChange', JSON.stringify(row))
        this.$router.push(`/newMaintain?id=` + getParam('id'))
      },
      // 删除
      handleDelete (index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {}
          let url
          if (this.isclick) {
            url = this.api2.maintain.deleteRepaireProjectData
            params.fixedNumber = row.fixedNumber
          } else {
            url = this.api2.maintain.deleteCheckProjectData
            params.id = row.id
          }
          ajax.post(url, params).then((res) => {
            if (res.msg.code === '20000') {
              this.$message({type: 'success', message: '删除成功!'})
              this.getRepaireFormMes()
              this.getCheckFormMes()
            } else {
              this.$message.error(res.msg.message)
            }
          })
        }).catch(() => {
          this.$message({type: 'info', message: '已取消删除'})
        })
      },
      handleCurrentChange (val) {
        let url
        if (this.isclick) {
          url = this.api2.maintain.projectRepaireData
          this.searchData.repairTime = resetDate(this.searchData.choseTime1[0])
          this.searchData.endTime = resetDate(this.searchData.choseTime1[1])
        } else {
          url = this.api2.maintain.projectCheckData
        }
        this.searchData.checkTime = resetDate(this.searchData.checkTime)
        let params = this.searchData
        params.projectCode = getParam('id')
        params.pageNum = val
        ajax.get(url, params).then((res) => {
          if (res.msg.code === '20000') {
            let data = res.data
            this.page = data.page
            for (let i = 0; i < data.list.length; i++) {
              data.list[i].edit = true
              data.list[i].orderNum = i + 1
              if (data.list[i].isChecked === 0) {
                data.list[i].isChecked = '未核实'
              } else if (data.list[i].isChecked === 1) {
                data.list[i].isChecked = '已核实'
              }
            }
            if (this.isclick) {
              this.repaireData = data.list
              this.tableData = this.repaireData
              this.tableItem = this.repaireItem
            } else {
              this.checkData = data.list
              this.tableData = this.checkData
              this.tableItem = this.checkItem
            }
          }
        })
      }
    }
  }
</script>
